<template>
  <el-input v-model="videoLink" placeholder="输入或选择链接">
    <template #append>
      <el-button @click="addFile">选择</el-button>
    </template>
  </el-input>
  <!-- 素材管理弹窗 -->
  <!-- <FileSelect ref="FileSelectRef" @success="setFile" /> -->
  <upload-attachment type="2" ref="videoRef" @confirm="setFile" />
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import UploadAttachment from '@/views/app/components/upload-attachment/index.vue'

// APP 链接输入框
defineOptions({ name: 'VideoLinkInput' })
// 定义属性
const props = defineProps({
  // 当前选中的链接
  modelValue: propTypes.string.def('')
})
// 当前的链接
const videoLink = ref('')
/** 素材管理（新增逻辑）*/
const videoRef = ref()
// 素材选中
// 当前的链接
const addFile = () => {
  videoRef.value.showDialog = true
}
const setFile = (fileList) => {
  videoLink.value = fileList[0].url
}
// getter
watch(
  () => props.modelValue,
  () => (videoLink.value = props.modelValue),
  { immediate: true }
)

// setter
const emit = defineEmits<{
  'update:modelValue': [link: string]
}>()
watch(
  () => videoLink.value,
  () => emit('update:modelValue', videoLink.value)
)
</script>
